<template>
    <view>
        <!-- 专辑背景 S -->
        <view class="album_bg">
            <image mode="widthFix" :src="album.cover"></image>
            <view class="album_info">
                <view class="album_name">{{album.name}}</view>
                <view class="album_btn">关注专辑</view>
            </view>
        </view>
        <!-- 专辑背景 E -->

        <!-- 作者 S -->
        <view class="album_author">
            <view class="album_author_info">
                <image mode="widthFix" :src="album.user.avatar"></image>
                <view class="album_author_name">{{album.user.name}}</view>
            </view>
            <view class="album_author_desc">
                <text>{{album.desc}}</text>
            </view>
        </view>
        <!-- 作者 E -->

        <!-- 列表 S -->
        <view class="album_list">
            <view class="album_item" v-for="(item,index) in wallpaper" :key="item.id">
                <go-detail :list="wallpaper" :index="index">
                    <image mode="aspectFill" :src="item.thumb + item.rule.replace('$<Height>','360')"></image>
                </go-detail>
            </view>
        </view>
        <!-- 列表 E -->
    </view>
</template>
<script>
import goDetail from '@/components/goDetail'
export default {
    components:{
        goDetail
    },
    data() {
        return {
            params: {
                limit: 30,
                order: 'new',
                skip: 0,
                first: 1
            },
            id: -1,
            album: {},
            wallpaper: [],
            hasMore: true
        }
    },
    mounted(){
        uni.setNavigationBarTitle({
            title: '专辑详情'
        });
    },
    onLoad(options){
        // console.log(options);
        this.id = options.id;
        // this.id = '5d5f8e45e7bce75ae7fb8278';
        this.getList();
    },
    onReachBottom(){
        if(this.hasMore){
            this.params.first = 0;
            this.params.skip += this.params.limit;
            this.getList();
        }else{
            uni.showToast({
                title: '没有更多数据了',
                icon: 'none'
            })
        }
        
    },
    methods: {
        getList(){
            this.request({
                url:`http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
                data: this.params
            })
            .then(result=>{
                // console.log(result)
                if(Object.keys(this.album).length === 0){
                    this.album = result.res.album;
                }
                
                if(result.res.wallpaper.length === 0){
                    this.hasMore = false;
                    uni.showToast({
                        title: '没有更多数据了',
                        icon: 'none'
                    })
                    return;
                }

                this.wallpaper =[...this.wallpaper,...result.res.wallpaper] ;
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.album_bg {
    position: relative;
  image {

  }

  .album_info {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 0 15rpx;
    .album_name {
        font-size: 40rpx;
    }

    .album_btn {
        background-color: $color;
        width: 152rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10rpx;
    }
  }
}

.album_author {
    padding: 10rpx;
  .album_author_info {
      padding:10rpx 0;
      display: flex;
    image {
        width: 50rpx;
    }

    .album_author_name {
        color: #000;
        margin-left: 15rpx;
    }
  }

  .album_author_desc {
    text {

    }
  }
}

.album_list {
    display: flex;
    flex-wrap: wrap;
  .album_item {
      width: 33.33%;
      border: 3rpx solid #fff;
    image {
        height: 160rpx;
    }
  }
}
</style>